<template>
	<view class="container">
		<st-navigation title="消息">
		</st-navigation>
		<!-- <view class="imgWrap">
			<image :src="src" mode="widthFix"></image>
		</view> -->
		<!-- <view class="search">
			<view class="input">
				<uni-icons type="search" color="#CECED9" size="22" @click="handleSearch"></uni-icons>
				<input type="text" placeholder="搜索联系人" confirm-type="search" v-model="searchValue" @blur="handleSearch">
			</view>
			<image src="../../static/images/lineMe/setings.png" class="img"></image>
		</view> -->
		<!-- 联系人列表 -->
		<view class="conWrap">
			<view class="contrct-wrap" @click="showContactHim = true">
				<image class="kefu-avatar" src="../../static/images/lineMe/actor.png"></image>
				<view class="content-wrap">
					<view class="content">
						<view class="title">人工客服</view>
						<!-- <view class="sub-title"></view> -->
					</view>
					<view class="sub-content ellipsis">
						每日9:00-18:00在线
					</view>
				</view>
			</view>
			<view class="contrct-wrap" v-for="designer in contrctList" :key="designer.id" @click="handleKefu(designer)">
				<!-- <view class="img">
					<image :src="$wanlshop.ossYSM(designer.avatar, 80, 80, 2, 'avatar')"></image>
					<view class="level" v-if="designer.designer_level">
						<span class="text">{{ designer.designer_level }}</span>
					</view>
				</view> -->
				<StAvatar :designer="designer"></StAvatar>

				<view class="content-wrap">
					<view class="content">
						<view class="title">{{ designer.username || designer.nickname }}</view>
						<!-- <view class="sub-title">{{ designer.designer_level }}</view> -->
					</view>
					<!-- <view class="sub-content ellipsis">
						{{ designer.intro }}
					</view> -->
				</view>
			</view>
		</view>
		<view class="" style="padding-bottom:env(safe-area-inset-bottom)">
			<view class="" style="height: 60px;">
				
			</view>
		</view>
		<view class="d-flex position-fixed bottom-0 left-0 right-0 bg-white " style="z-index: 99999; padding-bottom:env(safe-area-inset-bottom);">
			<view class="flex-1 text-center" @click="selectTab(index)" 
				style="height: 50px;line-height: 50px;font-size: 36rpx;color: #B3B3B3;"
				v-for="(item,index) in tabbarList" :key="index">
				<text :class="activeTabIndex===index?'active':''" style="">{{item.label}}</text>
			</view>
			
		</view>
		<u-popup round='8' :show="showContactHim" @close="close" mode='center'>
			<view class="d-flex flex-column a-center j-center" style="width:80vw;height: 400rpx;gap: 30rpx;">
				<view class="d-flex flex-column a-center" style="gap: 10rpx;">
					<text style="color: #4c7dd9;font-weight: bold;font-size: 30rpx;">18816507885</text>
					<text style="" class="text-light-muted">联系客服</text>
		
				</view>
				<view class="d-flex flex-column" style="gap: 10rpx;">
					<view class="rounded-ssm d-flex a-center j-center" @click="callPhone('18816507885')"
						style="background-color:#4c7dd9;width: 70vw;height: 70rpx;">
						<text style="color: white;">确认呼叫</text>
					</view>
					<view class=" d-flex a-center j-center" @click="showContactHim=false"
						style="width: 70vw;height: 70rpx;">
						<text>取消呼叫</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import StAvatar from '../../components/st-avatar/st-avatar.vue';

	export default {
		name: 'lineMe',
		components: {
			StAvatar
		},
		onShow() {
			uni.hideTabBar()
		},
		data() {
			return {
				activeTabIndex:1,
				setIcon: '../../static/images/lineMe/setings.png',
				// src: '../../static/images/ysmMall/banner.png',
				src: 'https://www.ysmll.cn/imgs/im.jpg',
				searchValue: '',
				contrctList: [],
				tabbarList: [{
					label: '首页',
				}, {
					label: '消息',
				}, {
					label: '我'
				}],
				showContactHim:false
			};
		},
		methods: {
			selectTab(index) {
				// this.activeTabIndex = index
				console.log(index,'index')
				switch(index){
					case 0:
					uni.switchTab({
						url:'/pages/ysmHome/ysmHome'
					})
					break;
					case 1:
					uni.switchTab({
						url:'/pages/lineMe/lineMe'
					})
					break;
					case 2:
					uni.switchTab({
						url:'/pages/ysmMy/ysmMy'
					})
					break;
				}
			},
			// 获取设计师列表
			getDesignerList() {
				let params = {
					sort: 'total_bookings',
					order: 'asc',
					search: this.searchValue,
				}
				this.$api.get({
					url: '/wanlshop/user/getDesignerList',
					data: params,
					success: res => {
						console.log(res.data)
						this.contrctList = res.data;
						// uni.stopPullDownRefresh();
						// this.status = 'more';
						// this.designerList = this.reload ? res.data : this.designerList.concat(res.data); //数据 追加
						// this.page = res.current_page; //当前页码
						// this.last_page = res.last_page; //总页码
					},
				});
			},
			handleSearch() {

			},
			handleKefu(item) {
				
				uni.navigateTo({
					url: `/pagesYSM/ysmDesignerShop/ysmFillAppointment?fromurl_id=${item.id}&fromurl=lineMe&designer_id=${item.id}&designer=${encodeURIComponent(JSON.stringify(item))}`
				});
				
				// uni.navigateTo({
				// 	url: `/pages/kefu/kefu`
				// })
			},
			callPhone(phoneNumber) {
			  uni.makePhoneCall({
			    phoneNumber: phoneNumber, // 电话号码
			    success: function () {
			      console.log('拨号成功');
				  this.showContactHim = false
			    },
			    fail: function () {
			      console.log('拨号失败');
				  this.showContactHim = false
			    }
			  });
			}
		},
		created() {
			this.getDesignerList();
		}
	}
</script>

<style lang="less" scoped>
	.active {
		color: #333333;
		font-weight: bold;
	}

	page {
		background-color: #fff;
		height: 100vh;
	}

	.container {
		background-color: #fff;
		height: 100vh;
		overflow: auto;
	}

	.imgWrap {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.search {
		// position: fixed;
		// z-index: 9999;
		width: 100%;
		display: flex;
		align-items: center;
		height: 72rpx;
		padding: 64rpx 32rpx 48rpx 32rpx;
		background-color: white;

		.input {
			width: 90%;
			background: #F6F7FB;
			border-radius: 80rpx;
			padding: 0 32rpx;
			height: 72rpx;
			font-weight: 400;
			font-size: 24rpx !important;
			color: #333333;
			display: flex;
			align-items: center;
		}

		.img {
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
		}
	}

	.conWrap {
		margin-top: 20rpx;
	}

	.contrct-wrap {
		display: flex;
		align-items: center;
		padding: 20rpx 32rpx;
		background-color: #fff; 
		border-bottom: 1px solid #F1F1F1;

		.kefu-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		/deep/ .designer-avatar {
			width: 120rpx;
			height: 120rpx;

			.designer_level {
				height: 38rpx;
				font-size: 16rpx;
			}
		}

		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			position: relative;

			.level {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 100%;
				background: rgba(139, 0, 0, 0.8);
				color: #fff;
				padding: 0 0 12rpx;
				text-align: center;

				.text {
					display: inline-block;
					font-size: 16rpx;
					transform: scale(0.8);
				}
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content-wrap {
			display: flex;
			flex-direction: column;
			flex: 1;
			padding-left: 32rpx;

			.content {
				display: flex;
				justify-content: space-between;
				width: 100%;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 16rpx;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}

				.sub-title {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.sub-content {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				width: 406rpx;
			}

			.ellipsis {
				white-space: nowrap;
				/* 强制在一行内显示 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 超出部分用省略号表示 */
			}
		}
	}
</style>